<template>
	<view class="tabContent" :style="{paddingTop:$u.addUnit(44 + $u.sys().statusBarHeight,'px')}">
		<!-- 标题 -->
		<u-navbar title="应用" style="z-index: 99;" :fixed="true" :safeAreaInsetTop="true">
			<view class="u-nav-slot" slot="left">
			</view>
			<view class="u-nav-slot" slot="right">
				<view
					style="display: flex;align-items: center;border: 1px solid #fff;color: #fff;padding: 6px 12px;overflow: hidden;border-radius: 9999px;">
					<uni-icons fontFamily="CustomFontPlatform" color="#fff"
						:size="18">{{$utils.toUniCode('&#xe675;')}}</uni-icons>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<uni-icons fontFamily="CustomFontPlatform" color="#fff" @click="CloseShopPage"
						:size="18">{{$utils.toUniCode('&#xe64a;')}}</uni-icons>
				</view>
			</view>
		</u-navbar>

		<!-- 菜单分类导航 -->
		<u-sticky :offsetTop="dynamicOffset" bgColor="#ffffff">
			<u-tabs :current="activeTabIndex" :list="module.treeTypes" keyName="treeTypeName" lineColor="#51d0d0"
				:activeStyle="{color:'#51d0d0',fontWeight:'600',transform:'scale(1.05)'}"
				@click="scrollToTreeType"></u-tabs>
		</u-sticky>

		<!-- 菜单分类明细 -->
		<scroll-view class="sv" scroll-y scroll-with-animation :scroll-into-view="scrollIntoViewId"
			scroll-event-throttle="100" @scroll="handleScroll">
			<view :id="'tab'+(index+1)" class="menu" v-for="(treeType,index) in module.treeTypes">
				<view class="menu-title">
					<text>{{treeType.treeTypeName}}</text>
				</view>
				<u-grid col="4">
					<u-grid-item v-for="(menu,pIndex) in treeType.pages" @click="checkOutMenu(menu)">
						<uni-icons :fontFamily="menu.CustomFont" :size="24"
							:color="menu.AP_Colour">{{ $utils.toUniCode(menu.PIC_PH) }}</uni-icons>
						<text class="grid-text">{{ getAbbrev(menu.APFunName) }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dynamicOffset: 0, // 吸顶偏移量
				module: {}, // 当前模块
				activeTabIndex: 0, // 当前Tab
				scrollIntoViewId: 'tab1', // 滚动ID
				tabHeight: [] // 记录每个tab的高度(不同)
			};
		},
		created() {
			let that = this;
			let modules = that.$store.state.APPModules;
			let currModuleID = that.$store.state.CurrModuleID;
			that.module = modules.find(item => item.ModuleID == currModuleID);
			// 获取dynamicOffset
			let offset = 44 + that.$u.sys().statusBarHeight;
			that.dynamicOffset = offset;
		},
		mounted() {
			this.calculateHeight();
		},
		methods: {

			getAbbrev(menuName) {
				let result = '';
				if (menuName.length > 6) {
					result = menuName.substring(0, 5) + '...';
				} else {
					result = menuName;
				}
				return result;
			},

			// 跳转菜单分类节点
			scrollToTreeType(item) {
				this.activeTabIndex = item.index;
				this.scrollIntoViewId = `tab${item.index+1}`;
			},

			handleScroll(event) {
				// const scrollTop = event.detail.scrollTop;
				// this.calculateTab(scrollTop);
			},

			calculateTab(scrollTop) {
				let tabIndex = 0
				console.log(this.tabHeight);
				if (scrollTop > 0 && scrollTop < (this.tabHeight[0] + 10)) {
					tabIndex = 0;
				}
				if (scrollTop >= (this.tabHeight[0] + 10) && scrollTop < (this.tabHeight[0] + this.tabHeight[1] + 2 *
						10)) {
					tabIndex = 1;
				}
				if (scrollTop >= (this.tabHeight[0] + this.tabHeight[1] + 2 *
						10) && scrollTop < (this.tabHeight[0] + this.tabHeight[1] + this.tabHeight[2] + 3 *
						10)) {
					tabIndex = 2;
				}
				if (scrollTop >= (this.tabHeight[0] + this.tabHeight[1] + this.tabHeight[2] + 3 *
						10)) {
					tabIndex = 3;
				}
				console.log(scrollTop, tabIndex);

				this.activeTabIndex = tabIndex;
				this.scrollIntoViewId = `tab${tabIndex+1}`;
			},

			// 计算每个tab高度
			calculateHeight() {
				this.module.treeTypes.forEach((item, index) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#tab' + (index + 1)).boundingClientRect(data => {
						if (data) {
							// console.log(data);
							this.tabHeight.push(data.height)
						}
					}).exec();
				})
			},

			// 跳转当前菜单页面
			checkOutMenu(menu) {
				console.log(menu)
				let currModuleID = this.$store.state.CurrModuleID;
				let path = menu.AP_Link;

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'Menu',
					data: menu
				});

				// wms h5页面跳转
				if (currModuleID == 4) {
					path = '/wms/list'
				}

				// 页面跳转待配置
				uni.navigateTo({
					url: path
				})
			},

			CloseShopPage() {
				uni.navigateBack({
					delta: 999
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$h-padding: 5px;
	$v-padding: 10px;
	$radius: 5px;

	.sv {
		padding: $v-padding $h-padding;
		height: calc(100vh - (env(safe-area-inset-bottom) / 2) - (44px + 44px + env(safe-area-inset-top)));
		// height: calc(100vh - (50px + env(safe-area-inset-bottom) / 2) - (44px + 44px + env(safe-area-inset-top)));
	}

	.tabContent {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;

		.menu {
			padding: $v-padding $h-padding;
			margin-bottom: $v-padding;
			background-color: #ffffff;
			border-radius: $radius;

			&-title {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				height: 35px;
				font-size: 16px;
				font-weight: 600;
			}
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 5px 0 10px 0;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>